<template>
  <div class="padding-20">
    <el-table :border="true" class="new-table-style" :data="tableData">
      <el-table-column align="left" label="账单状态" prop="workNum" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.paymentStatus == 0">未出账</span>
          <span v-else-if="scope.row.paymentStatus == 1">
            <span v-if="scope.row.differDay > 0 && scope.row.differDay < 31">
              缴费到期<br />
              {{ Math.abs(scope.row.differDay) }}天
            </span>
            <template v-else>未结清</template>
          </span>
          <span v-else-if="scope.row.paymentStatus == 2">
            <span v-if="scope.row.differDay > 0 && scope.row.differDay < 31">
              缴费到期<br />
              {{ Math.abs(scope.row.differDay) }}天
            </span>
            <template v-else>未缴费</template>
          </span>
          <span v-else-if="scope.row.paymentStatus == 3" class="color-red">
            逾期<br />
            {{ Math.abs(scope.row.differDay) }}天
          </span>
          <span v-else-if="scope.row.paymentStatus == 4">已结清</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="客户名称">
        <!-- <template #header>
          <el-input maxlength="20" class="no-border-inner" placeholder="账单说明" v-model="model.billInfo" @blur="getDataSource" @keyup.enter.native="getDataSource"></el-input>
        </template> -->
        <template slot-scope="scope">
          <span>{{ scope.row.customerName }}</span>
          <br />
          <span>({{ scope.row.chargeItemName }}：{{ scope.row.assetTypeName }})</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="账单日期" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.cycleStartTime | formatDateTime('YYYY-MM-DD') }}</span
          ><br />
          <span>至</span><br />
          <span>{{ scope.row.cycleEndTime | formatDateTime('YYYY-MM-DD') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="应缴费日期" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.paymentDeadline | formatDateTime('YYYY-MM-DD') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" class-name="no-padding" label="费项" width="120">
        <template slot-scope="scope">
          <section v-for="(item, index) in scope.row.child">
            <div class="cellBox" :class="'cellBox' + index">
              <span class="font-weight-700" v-if="item.bizTypeName == '合计'">{{ item.bizTypeName }}</span>
              <span v-else>{{ item.bizTypeName }}</span>
            </div>
          </section>
        </template>
      </el-table-column>
      <el-table-column align="center" class-name="no-padding" label="应收金额" width="120">
        <template slot-scope="scope">
          <section v-for="(item, index) in scope.row.child">
            <div class="cellBox" :class="'cellBox' + index">
              <span class="font-weight-700" v-if="item.bizTypeName == '合计'">{{ item.amountReceivable | moneyFilterNoUnit }}</span>
              <span v-else>{{ item.amountReceivable | moneyFilterNoUnit }}</span>
            </div>
          </section>
        </template>
      </el-table-column>
      <el-table-column align="center" class-name="no-padding" label="欠费金额" width="120">
        <template slot-scope="scope">
          <section v-for="(item, index) in scope.row.child">
            <div class="cellBox" :class="'cellBox' + index">
              <span class="font-weight-700" v-if="item.bizTypeName == '合计'">{{ item.amountOwed | moneyFilterNoUnit }}</span>
              <span v-else>{{ item.amountOwed | moneyFilterNoUnit }}</span>
            </div>
          </section>
        </template>
      </el-table-column>
      <el-table-column align="center" class-name="no-padding" label="欠费与押金占比" width="140">
        <template slot-scope="scope">
          <section v-for="(item, index) in scope.row.child">
            <div class="cellBox" :class="'cellBox' + index">
              <template v-if="item.depositAmount">
                <span class="font-weight-700" v-if="item.bizTypeName == '合计'">{{ Math.abs(item.owedDepositRate || 0) | accMul }}%</span>
                <span v-else>{{ Math.abs(item.owedDepositRate || 0) | accMul }}%</span>
              </template>
              <template v-else> -- </template>
            </div>
          </section>
        </template>
      </el-table-column>
      <el-table-column align="center" class-name="no-padding" label="已缴纳金额" width="120">
        <template slot-scope="scope">
          <section v-for="(item, index) in scope.row.child">
            <div class="cellBox" :class="'cellBox' + index">
              <span class="font-weight-700" v-if="item.bizTypeName == '合计'">{{ item.amountReceived | moneyFilterNoUnit }}</span>
              <span v-else>{{ item.amountReceived | moneyFilterNoUnit }}</span>
            </div>
          </section>
        </template>
      </el-table-column>
      <el-table-column align="center" class-name="no-padding" label="未缴纳金额" width="120">
        <template slot-scope="scope">
          <section v-for="(item, index) in scope.row.child">
            <div class="cellBox" :class="'cellBox' + index">
              <span class="font-weight-700" v-if="item.bizTypeName == '合计'">{{ item.unPaymentAmount | moneyFilterNoUnit }}</span>
              <span v-else>{{ item.unPaymentAmount | moneyFilterNoUnit }}</span>
            </div>
          </section>
        </template>
      </el-table-column>
    </el-table>

    <Pagination v-if="total" @change="pageChange" :total="total" paginationLayout="total, prev, pager, next" />
  </div>
</template>

<script>
  import { apiContractBillList, apiContractInfo } from '../../../api/contract';

  export default {
    name: 'mine',

    data() {
      return {
        sourceData: [],
        tableData: [],
        total: 0,
        currentPage: 1,
        pageSize: 10,
        model: { billInfo: '' },
        contractCode: '',
        contractStatus: '',
      };
    },

    methods: {
      async getContractInfo() {
        let res = await apiContractInfo({ primaryKey: this.$route.query.contractKey });
        this.contractCode = res.contractCode;
        this.contractStatus = res.contractStatus;
        this.getDataSource();
      },

      //contractCode: 有此参数则用这个code（用于全部账单的页面）
      async getDataSource(more, contractCode) {
        let params = {
          currentPage: more ? this.currentPage : 1,
          pageSize: this.pageSize,
          likeBillDescription: this.$route.query.assetName || null,
          contractCode: contractCode || this.contractCode,
          chargeItemCode: this.$route.query.assetCode || null,
          status: 1,
          queryType: !this.contractStatus || this.contractStatus == 1 ? 2 : 1, //审批过的是 1  反之 2
        };
        //只有流程中的传key
        if (this.$route.query.taskId) {
          params.contractKey = this.$route.query.contractKey;
        }
        let res = await apiContractBillList(params);
        this.sourceData = res.rows || [];
        this.total = res.total || 0;
        this.initTableData();
      },

      //处理table数据
      initTableData() {
        this.tableData = [];
        let list = this.lodash.cloneDeep(this.sourceData);
        list.forEach(project => {
          if (project.child && project.child.length) {
            project.child.forEach(item => {
              item.differDay = project.differDay;
              item.billDescription = project.billDescription;
              item.cycleStartTime = project.cycleStartTime;
              item.cycleEndTime = project.cycleEndTime;
              item.paymentDeadline = project.paymentDeadline;
            });
          }
        });

        this.tableData = list;
      },

      //合并行  当前行row、当前列column、当前行号rowIndex、当前列号columnIndex
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        let initNum = 0; //当前项目在table中是第几行开始的
        let rowColSpan = {
          rowspan: 0,
          colspan: 0,
        };
        //只处理第一列，每次根据当前项目的 类别个数 进行合并第一列的行
        if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4) {
          this.sourceData.forEach(item => {
            if (item.child && item.child.length > 0) {
              let dividend = item.child.length; //当前项目的类别个数
              if (rowIndex == initNum) {
                rowColSpan = {
                  rowspan: dividend,
                  colspan: 1,
                };
              }
              initNum = initNum + dividend; //合并后 加上上一个项目的类别个数
            }
          });
          return rowColSpan;
        }
      },

      //分页
      pageChange(page) {
        this.currentPage = page.currentPage;
        this.getDataSource('more');
      },
    },

    mounted() {
      this.getContractInfo();
    },
  };
</script>

<style lang="scss" scoped>
  .color-red {
    color: #ff3535 !important;
  }

  .no-border-inner {
    ::v-deep .el-input__inner {
      border: none;
      font-size: 16px;
      color: #999;
    }
  }

  ::v-deep .no-padding {
    padding: 0 !important;

    .cell {
      padding: 0 !important;
    }
  }

  .cellBox {
    width: 100%;
    font-size: 16px;
    padding: 12px 0;
    border-bottom: 1px solid #ebeef5;
  }

  .cellBox0 {
    background: #eaf2fe;
  }

  .cellBox1 {
    background: #e9f9f2;
  }

  .cellBox2 {
    background: #fef4e5;
  }

  ::v-deep .has-gutter tr th {
    border-right: 1px solid #787878;
  }
</style>
